<template>
  <div id="app">
    <div class="left">
      <div v-if="arr">
        <div
          v-for="(item, index) in arr"
          :key="index"
          style="width: 100%; height: 50px"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="right"></div>
  </div>
</template>



<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    axios.get("/list").then((res) => {
      console.log(res.data);
      this.arr = res.data;
    });
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  display: flex;
  .right {
    flex: 1;
  }
}
 .left {
    width: 90px;
    background: skyblue;
    // overflow-y: auto;
  }

</style>
